<template>
  <div class="container">
    <uv-navbar bgColor="transparent" :autoBack="true">
      <template v-slot:left>
        <view class="uv-nav-slot">
          <uv-icon name="arrow-left" size="19" color="#000000"></uv-icon>
        </view>
      </template>
      <template v-slot:right>
        <view class="uv-nav-slot flex alignCenter">
          <uv-button :text="`${info.follow? '已关注' : '未关注'}`" @click="followClick" size="mini" shape="circle"></uv-button>
          <view style="margin-left:5px">
            <uv-icon name="share-square" size="20" color="#454344"></uv-icon>
          </view>
        </view>
      </template>
    </uv-navbar>

    <view class="bgImage">
      <image :src="info.topicImage" mode="widthFix" />
      <view class="box">
        <view class="topicName bold flex alignCenter">
          <text>{{info.topicName}}</text>
          <uv-image v-if="info.isInvolved==1" src="https://cos.qcshejiao.com/qc/xcxui/ig/57966.png" width="35px" height="35px"></uv-image>
        </view>
        <view class="fz12 alignCenter justifyBetween flex">
          <text>{{info.numberOfParticipants}}人参与 </text>
          <text>{{info.dynamicNumber}}动态</text>
        </view>
      </view>
    </view>

    <view class="cells">
      <view class="cell" v-for="(item, index) in list" :key="index">
        <view class="user flex alignCenter">
          <uv-avatar :src="item.avatar" size="43"></uv-avatar>
          <view class="info">
            <view class="nickname bold flex alignCenter">
              <text style="margin-right:5px">{{item.nickname}}</text>
              <uv-image v-if="item.isVip==1" src="https://cos.qcshejiao.com/qc/xcxui/ig/74194.png" width="30px" mode="widthFix"></uv-image>
            </view>
            <view class="desc fz12">{{item.ageYear}}·{{item.industry}}·{{item.homeEconomize}}·{{item.city}}</view>
          </view>
        </view>
        <view class="textContent fz14">
          <uv-parse :content="replaceIfMatch(item.textContent,item.movementJsons,'#429CEE')"></uv-parse>
        </view>
        <view class="imageContent">
          <showImages v-model="item.imageContent"></showImages>
        </view>

        <view class="topicDiv" v-if="item.topic && item.topic.id" @click.stop="proxy.$utils.toLink(`/packagePages/topic/topicDetails?id=${item.topic.id}`)">
          <view class="flex alignCenter fz12 shrink">
            <uv-image src="https://cos.qcshejiao.com/qc/xcxui/ig/95270.png" radius="50%" width="13px" mode="widthFix"></uv-image>
            <view class="text">{{item.topic.topicName}}</view>
          </view>
        </view>

        <view class="flex alignCenter other justifyBetween">
          <view class="flex alignCenter justifyEnd">
            <view class="like flex alignCenter fz16">
              <view class="icon" @click.stop="likeFunc(item)">
                <uv-icon name="heart" size="25" color="#E59840" v-if="item.hasLiked==0"></uv-icon>
                <uv-icon name="heart-fill" size="25" color="#E59840" v-else></uv-icon>
              </view>
              {{item.likeCount||null}}
            </view>
            <view class="message flex alignCenter fz14">
              <uv-icon name="chat" size="25" color="#999999"></uv-icon>
              {{item.commentCount||null}}
            </view>
            <view class="message">
              <uv-icon name="share-square" size="25" color="#999999"></uv-icon>
            </view>
          </view>
          <uv-icon name="more-dot-fill" size="25" color="#999999"></uv-icon>
        </view>

        <uv-divider text=""></uv-divider>
      </view>
    </view>

    <view v-if="!list.length" class="empty">
      <view class="image">
        <uv-image src="https://cos.qcshejiao.com/qc/xcxui/ig/69058.png" width="100%" mode="widthFix"></uv-image>
      </view>
      <view class="fz14 textCenter">目前没有话题，立即发布您的话题吧</view>
    </view>

    <uv-back-top :scroll-top="scrollTop"></uv-back-top>
  </div>
</template>

<script setup lang="ts">
import showImages from "@/components/main/showImages.vue";
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();

let current = ref(0);
let params = {
  topicId: "",
  page: 1,
  pageSize: 10,
  type: 1,
};
let topicId;
let info = ref({});
let loading = ref(false);
let tabs = ref([
  { name: "推荐", value: 1, list: [] },
  { name: "同城", value: 2, list: [] },
]);
let scrollTop = ref(0);
let totalPages = 0;
let swiperStyle = ref({
  height: "",
});
let list = ref([]);

let customTextStyle = computed(() => {
  return {
    fontSize: "12px",
    color: "#666666",
  };
});

let customStyle = computed(() => {
  return {
    width: "80px",
    height: "35px",
  };
});

let tagItemStyle = computed(() => {
  return {
    color: "#000000",
    fontSize: "16px",
  };
});

let activeStyle = computed(() => {
  return {
    fontSize: "16px",
    color: "#B2A1FF",
    fontWeight: "bold",
  };
});

onLoad((e) => {
  topicId = e.id;
});

onShow(() => {
  init();
  getData();
});

onReady(() => {
  setCss();
});

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

function replaceIfMatch(inputString, friends, colorValue) {
  // 正则表达式匹配 @$与$ 之间的字符串
  const regex = /\@\$([0-9]+)\$/g;
  // 使用 replace 方法进行替换
  const resultString = inputString.replace(regex, (match, friendId) => {
    // 找到对应的 friendId
    const friend = friends.find((f) => f.friendId == Number(friendId));
    // 如果找到了对应的好友，替换成带色值的 @nikeName；否则不做替换
    return friend
      ? `<span style="color: ${colorValue};">@${friend.nikeName}</span>`
      : match;
  });
  return resultString;
}

function getMore() {
  if (tabs.value[current.value].totalPages <= params.page) return;
  params.page++;
  getInfo();
}

async function setCss() {
  const systemInfo = uni.getSystemInfoSync();
  let windowHeight = systemInfo.windowHeight;
  let swiperTop = await viewInfo("#swiper", "top");
  swiperStyle.value.height = `${windowHeight - Number(swiperTop)}px`;
}

function swiperChange(e) {
  current.value = e.detail.current;
}

function init() {
  getInfo(0);
  //getInfo(1);
}

async function getInfo(num?) {
  params.topicId = topicId;
  let resp = await proxy.$apis.recommendTopic(params);
  if (resp.records.length) {
    list.value = proxy.$utils.filterArr([...list.value], resp.records, "id");
  }
  totalPages = resp.totalPages;
  console.log("list.value", list.value);

  // let index = proxy.$utils.isNumber(num) ? num : current.value;
  // params.type = tabs.value[index].value;
  // let resp = await proxy.$apis.recommendTopic(params);
  // let arr = [...tabs.value[index].list];
  // if (resp.records.length) {
  //   arr = proxy.$utils.filterArr(arr, resp.records, "id");
  // }
  // tabs.value[index].list = arr;
  // tabs.value[index].totalPages = resp.totalPages;
}
async function getData() {
  info.value = await proxy.$apis.getDefaultTopicInfo({ topicId });
  console.log("getData", info.value);
}

//点赞
async function likeFunc(item) {
  await counter.toLike(item.hasLiked, item.id, 1);
  if (item.hasLiked) {
    proxy.$utils.showToast("取消点赞成功");
  } else {
    proxy.$utils.showToast("点赞成功");
  }
  getInfo();
}

function tabsClick(e) {
  current.value = e.index;
}

async function followClick() {
  try {
    loading.value = true;
    if (info.value.follow) {
      await proxy.$apis.topicUnFocus({ topicId });
    } else {
      await proxy.$apis.topicContacts({ topicId });
    }
    await getData();
    proxy.$utils.showToast(
      `${info.value.follow ? "关注成功" : "取消关注成功"}`
    );
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

//获取页面元素信息
function viewInfo(id, type) {
  return new Promise((resolve, reject) => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select(id)
      .boundingClientRect((data) => {
        if (data) {
          resolve(data[type]);
        } else {
          resolve(0);
        }
      })
      .exec();
  });
}
</script>



<style lang="scss" scoped>
.container {
  .empty {
    margin-top: 50px;
    .image {
      width: 150px;
      margin: auto;
    }
  }
  .bgImage {
    background-color: #000;
    position: relative;
    image {
      display: block;
      opacity: 0.6;
      filter: alpha(opacity=60);
    }
    .box {
      position: absolute;
      left: 0;
      right: 0;
      padding: 0 26px;
      color: white;
      bottom: 10vw;
      .topicName {
        margin-bottom: 10px;
        font-size: 24px;
        text {
          margin-right: 15px;
        }
      }
    }
  }
  .cells {
    padding: 15px;
    .cell {
      .user {
        .info {
          margin-left: 10px;
          .nickname {
            color: #3c69b4;
          }
          .desc {
            color: #d2d2d2;
          }
        }
      }
      .textContent {
        color: #333333;
        padding: 10px 0;
      }
      .topicDiv {
        display: inline-block;
        color: #429cee;
        background-color: #f1f7ff;
        line-height: 30px;
        padding: 0 20px;
        border-radius: 15px;
        margin-top: 5px;
      }
      .other {
        margin-top: 15px;
        .like {
          color: #e59840;
          width: 80px;
        }
        .message {
          width: 80px;
        }
      }
    }
  }
}
</style>






